<template>
    <div class="wrap">
        <div class="shop-box">
            <router-link class="shop-item" v-for="item in list" :key="item.id" :to="'/home/shopinfo/'+item.id" tag="div">
                <div class="pic-box">
                <img :src="item.img" alt="">
                <h4>{{item.title}}</h4>
                </div>
                <div class="detail">
                    <p><span class="new-pic">￥{{item.price}}</span><span class="old-pic">￥2800</span></p>
                    <p><span>热卖中</span> <span>剩{{item.number}}件</span></p>
                </div>
            </router-link>
        </div>
       
    </div>
</template>
<script>
export default {
    data(){
        return{
           list:[
            {id:1,img:'../../images/8.jpg',number:100,title:'标题1',price:3800},
            {id:2,img:'../../images/55st.png',number:200,title:'标题2',price:4800},
            {id:3,img:'../../images/106st.png',number:130,title:'标题3',price:1800},
            {id:4,img:'../../images/8.jpg',number:100,title:'标题1',price:3800},
            {id:5,img:'../../images/55st.png',number:200,title:'标题2',price:4800}
          
            ]
        }
    }
}
</script>
<style scoped>
.shop-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 50px;
}
.shop-box .shop-item{
    width: 49%;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    padding: 5px;
    box-shadow: 0 0 10px #ccc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}
.detail{
    background-color: #cccccc70;
}
.pic-box img{
    width: 100%;
    height: 150px;
}
</style>


